<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>考核管理</a-breadcrumb-item>
      <a-breadcrumb-item>考核申诉审核</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="18">
        申诉时间范围：
        <a-range-picker
          style="width: 330px"
          v-model="creationDateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          @change="changeDate"
        />
      </a-col>
      <a-col :span="6">
        <!-- <a-button type="primary" @click="detailFn('add')"> 增加 </a-button> -->
        &emsp;&nbsp;
        <a-button type="primary" @click="search()"> 查询 </a-button>
        &emsp;&nbsp;
        <a-button @click="reset">重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <div class="flex-between">
            <a-tabs v-model="queryForm.appealStatus" @change="changeTab">
              <a-tab-pane
                v-for="item in menuList"
                :key="item.value"
                :tab="item.label"
              >
              </a-tab-pane>
            </a-tabs>
          </div>
          <a-table
            :columns="columns"
            :data-source="tableData"
            :scroll="{ x: 1200 }"
            :pagination="false"
          >
            <span slot="appealType" slot-scope="text, record">
              {{ getName(record.appealType, appealType) }}
            </span>
            <span
              slot="action"
              slot-scope="text, record"
              v-if="queryForm.appealStatus == 0"
            >
              <a
                class="red"
                v-hasPermi="['sssh:btn']"
                @click="clickCont2(text,2)"
                >驳回</a
              >
              <a-divider type="vertical" v-hasPermi="['sssh:btn']" />
              <a
                class="blue"
                v-hasPermi="['sssh:btn']"
                @click="clickCont2(text,1)"
                >通过</a
              >
            </span>
          </a-table>
          <div class="page_box">
            <a-pagination
              v-model="queryForm.offset"
              :page-size-options="['20', '30', '40', '50']"
              :total="total"
              show-size-changer
              :page-size="queryForm.current"
              @showSizeChange="onShowSizeChange"
              @change="pageChange"
              :show-total="(total) => `共 ${total} 条`"
            ></a-pagination>
          </div>
        </a-col>
      </a-row>
    </a-spin>

    <a-modal
      :title="indexShenhe == 1 ? '请输入通过原因' : '请输入驳回原因'"
      :visible="dialogVisible"
      cancel-text="取消"
      ok-text="确认"
      width="50%"
      @cancel="dialogVisible = false"
      @ok="handleSubmit"
    >
      <a-form
        :model="dataDialogFrom"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item :label="indexShenhe == 1 ? '通过原因' : '驳回原因'">
          <a-textarea
            v-model:value="dataDialogFrom.checkDesc"
            v-decorator="[
              'checkDesc',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            :rows="4"
            placeholder="请输入"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { appealStatusList } from "./common";
import { Modal, message } from "ant-design-vue";

const columns = [
  {
    title: "审核ID",
    dataIndex: "appealUserId",
    key: "appealUserId",
     
  },
  {
    title: "申诉部门",
    dataIndex: "deptName",
    key: "deptName",
     
  },
  {
    title: "申诉人",
    dataIndex: "userName",
    key: "userName",
     
  },
  
  {
    title: "申诉状态",
    dataIndex: "appealStatus",
    key: "appealStatus",
     
    customRender: (text, record, index) => {
      console.log(text);
      return text == 0
        ? "未审核"
        : text == 1
        ? "审核成功"
        : text == 2
        ? "审核失败"
        : "";
    },
  },
  {
    title: "审核意见",
    dataIndex: "checkDesc",
    key: "checkDesc",
  },
  {
    title: "申诉情形",
    dataIndex: "appealType",
    key: "appealType",
     
    scopedSlots: { customRender: "appealType" },
  },
  {
    title: "事件id",
    dataIndex: "dkrId",
    key: "dkrId",
     
  },
  {
    title: "申诉详情",
    dataIndex: "appealDesc",
    key: "appealDesc",
     
  },
  {
    title: "申诉时间",
    dataIndex: "createTime",
    key: "createTime",
     
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];
const columns2 = [
  {
    title: "事件ID",
    dataIndex: "eventId",
    key: "eventId",
    
  },
  {
    title: "抽查人员",
    dataIndex: "userName",
    key: "userName",
    
  },
  {
    title: "所属组织",
    dataIndex: "deptName",
    key: "deptName",
     
  },
  {
    title: "职位",
    dataIndex: "postName",
    key: "postName",
    
  },
  // {
  //   title: "工作类型",
  //   dataIndex: "relatedObjectName",
  //   key: "relatedObjectName",
  //   width: 100,
  // },
  {
    title: "问题对象",
    dataIndex: "issueType",
    key: "issueType",
     
  },
  {
    title: "上报时间",
    dataIndex: "reportTime",
    key: "reportTime",
    
  },
  {
    title: "完成时间",
    dataIndex: "overTime",
    key: "overTime",
     
  },
  {
    title: "考评状态",
    dataIndex: "kpStatusName",
    key: "kpStatusName",
     
  },
  {
    title: "考评人",
    dataIndex: "kpUserName",
    key: "kpUserName",
     
  },
  {
    title: "考评星级",
    dataIndex: "kpSocre",
    key: "kpSocre",
     
  },
  {
    title: "考评时间",
    dataIndex: "kpTime",
    key: "kpTime",
     
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];
export default {
  data() {
    return {
      total: 0,
      dialogTitle: "",
      dialogVisible: false,
      tableData: [],
      columns,
      columns2,
      loading: false,
      appealStatusList: appealStatusList,
      queryForm: {
        current: 20,
        offset: 1,
        appealStatus: 0,
        startTime: "",
        endTime: "",
      },
      menuList: [
        { label: "未审核", value: 0 },
        { label: "已通过", value: 1 },
        { label: "已驳回", value: 2 },
      ],
      appealType: [],
      creationDateRange: [],
      dataDialogFrom: {},
      fzroptions: [],
      userInfo: null,
      tabsValue: 3,
      clickData: {},
      showclickData: false,
      indexShenhe:null
    };
  },
  mounted() {
    this.getList(); // 可申诉
    // this.getList2(); // 申诉成功 和 申诉失败
    // this.getDict();
    // this.getListDept();//部门
  },
  methods: {
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.offset = current;
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    // ----获取部门
    getListDept() {
      var q1 = "government-platform-center/dept?offset=1&current=100";
      this.$axios.get(q1).then((res) => {
        if (res.data.msg == "success") {
          var data = res.data.data;
          this.fzroptions = [];
          for (let i = 0; i < data.length; i++) {
            this.fzroptions.push({
              value: data[i].thisData.deptId,
              label: data[i].thisData.deptName,
              children: [],
            });
            for (let j = 0; j < data[i].childList.length; j++) {
              this.fzroptions[i].children.push({
                value: data[i].childList[j].thisData.deptId,
                label: data[i].childList[j].thisData.deptName,
                isLeaf: false,
              });
            }
          }
        }
      });
    },

    changeDate(val) {
      this.queryForm.startTime = val[0];
      this.queryForm.endTime = val[1];
    },
    changeTab(e) {
      this.queryForm.appealStatus = e;
      this.tabsValue = e;
      this.queryForm.current = 20;
      this.queryForm.offset = 1;
      console.log("--切换--", this.queryForm.appealStatus);
      this.getList();
    },
    search() {
      this.tableData = [];
      this.queryForm.offset = 1;
      this.getList();
    },
    reset() {
      this.tableData = [];
      this.creationDateRange = [];
      this.queryForm.offset = 1;
      this.queryForm.startTime = "";
      this.queryForm.endTime = "";
      this.getList();
    },
    getList() {
      this.loading = true;
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      const url1 =
        "government-platform-center/kpiRecord/queryByPagePd?flag=3&userId=" +
        this.userInfo.userId +
        "&current=" +
        this.queryForm.current +
        "&offset=" +
        this.queryForm.offset +
        "&startTime=" +
        this.queryForm.startTime +
        "&endTime=" +
        this.queryForm.endTime;
      const url2 =
        "/government-platform-center/kpiAppeal?current=" +
        this.queryForm.current +
        "&offset=" +
        this.queryForm.offset +
        "&startTime=" +
        this.queryForm.startTime +
        "&endTime=" +
        this.queryForm.endTime +
        "&appealStatus=" +
        this.queryForm.appealStatus;
      const url3 =
        "/government-platform-center/kpiAppeal/getShenheApp?current=" +
        this.queryForm.current +
        "&offset=" +
        this.queryForm.offset +
        "&startTime=" +
        this.queryForm.startTime +
        "&endTime=" +
        this.queryForm.endTime +
        "&appealStatus=" +
        this.queryForm.appealStatus;
      this.$axios.get(url3, this.queryForm).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    // //事件考核申诉类型
    // async getDict() {
    //   const url = "government-platform-center/dictData/queryByCode?dictType=event_appeal_type";
    //   const res = await this.$axios.get(url);
    //   if (res.data.code == 0) {
    //     this.appealType = res.data.data;
    //   }
    // },
    getName(id, list) {
      let name = "";
      list.forEach((item) => {
        if (id == item.dictValue) {
          name = item.dictLabel;
        }
      });
      // console.log('----',list)

      return name;
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/kpiAppeal/deleteById`;
          that.$axios
            .post(
              url,
              { id: text.id },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.reset();
              }
            });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    // 申诉审核
    clickCont(index, text) {
      const that = this;
      Modal.confirm({
        title: "温馨提示",
        content: index == 1 ? "确定审核通过吗" : "确定审核不通过吗",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/kpiAppeal/edit`;
          that.$axios
            .post(
              url,
              { id: text.id, appealStatus: index },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((res) => {
              if (res.data.code == 0) {
                that.$message.success("操作成功");
                that.reset();
              }
            });
        },
        onCancel() {
          // 在此处理取消逻辑
          // console.log('删除已取消')
        },
      });
    },
    // 驳回
    clickCont2(text,indexShenhe) {
      this.dataDialogFrom = text;
      this.indexShenhe = indexShenhe;
      this.dialogVisible = true;
    },
    detailFn(index, text, record) {
      // console.log(text,'点击点击',record)
      this.dialogTitle = index;
      this.dialogVisible = true;
      this.dataDialog = record;
    },
    handleSubmit() {
      let text = this.dataDialogFrom;
      if (!text.checkDesc) {
         message.error(this.indexShenhe == 1 ? "请输入通过原因":"请输入驳回原因");
         return
      }
      const url = `/government-platform-center/kpiAppeal/edit`;
      this.$axios
        .post(
          url,
          { id: text.id, checkDesc: text.checkDesc, appealStatus: this.indexShenhe },
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.dialogVisible = false;
            this.$message.success("操作成功");
            this.reset();
          }
        });
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
.table {
  width: 100%;
  overflow-x: auto !important;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
</style>
